﻿@using EFDataModel
@model ContactMvc4TB.Models.Worktime.CreateWorktimeEntryModel

@{
    ViewBag.Title = "Arbeitszeiterfassung";
}

@section styles
{
    @Styles.Render("~/Content/jqueryUi")
}

@* Wichtig der Actionname darf nicht mit angegeben werden, da wir mit dem Formular unterschiedliche Actions ausführen, z.B. "Worktime" oder "WorktimeByDate" *@
@using (Html.BeginForm(null, EControllers.Worktime.ToString(), new { id = Model.WorktimeId, userId = Model.UserId }, FormMethod.Post, new { @class = "form-horizontal" }))
{
    <div class="span12">
        @Html.MyValidationSummary()
        @Html.ShowCustomMessage()
    </div>
    <div class="span12">
        <div id="timeCanvasDiv" class="well well-small">
            <canvas id="timeCanvas" width="920" height="200"></canvas>
        </div>
    </div>
    <div class="span7">
        <div class="well well-small">
            <div class="row">
                <div class="span6">
                    <h4>Arbeitszeiteintrag - @Model.CurrentDate.ToString("ddd, dd MMM yyyy")</h4>
                    <button type="submit" class="btn" name="@WorktimeHelper.BtnIdPrevDay"><i class="icon-chevron-left"></i></button>
                    @Html.TextBoxFor(model => model.CurrentDate, new { @class = "input-small " + WebConstants.DatePickerCssClass, type = "date", @Value = Model.CurrentDate.ToString(WebConstants.InputDateTimeFormat) })
                    <button type="submit" class="btn" name="@WorktimeHelper.BtnIdNextDay"><i class="icon-chevron-right"></i></button>
                    <button type="submit" class="btn" name="SubmitType" title="Lädt das in der Textbox angezeigte Datum.">@WorktimeHelper.BtnLoadDate</button>
                    @Html.ActionLink(WorktimeViews.BtnShowToday, EActionWorktime.LoadToday.ToString(), EControllers.Worktime.ToString(), new { id = 0, userId = Model.UserId }, new { @class = "btn" })
                </div>
                <div class="span6">
                    &nbsp;
                </div>
                <div class="span6">
                    @Html.LabelFor(model => model.WorktimeTypeList)
                    @Html.DropDownListFor(model => model.WorktimeType, Model.WorktimeTypeList)
                    <a href="#" class="helpPopOver" data-content="Jeder Zeitraum der angelegt werden kann, muss einer passenden Arbeitszeitkategorie zugeordnet werden. Die beiden wichtigsten Typen sind die 'Arbeitszeit' und die 'Pause'. Für jeden Arbeitstag sollte mindestens ein Eintrag vom Typ 'Arbeitszeit' angelegt werden, damit die Arbeitszeitberechnung ausgeführt werden kann." data-placement="top" data-toggle="popover" data-trigger="hover" data-original-title="Arbeitszeitkategorie"><i class="icon-question-sign"></i></a>
                    @Html.DropDownListFor(model => model.SelectedProject, Model.ProjectList, GlobalStrings.PleaseSelectItemsRESX)
                    <a href="#" class="helpPopOver" data-content="Wenn Sie eine Projektzeit anlegen, dann können Sie hier die Projekte aus 'Meine Projekte' finden und entsprechend auswählen." data-placement="top" data-toggle="popover" data-trigger="hover" data-original-title="Projektzuordnung"><i class="icon-question-sign"></i></a>
                </div>
                <div class="span6">
                    &nbsp;
                </div>
                <div class="span6">
                    <label for="amount">Arbeitszeit</label>
                    <input id="StartTime" readonly="readonly" class="text-box single-line input-mini uneditable-input" type="time" value="@Model.StartTime.ToString("HH:mm")" name="StartTime" data-val="true">
                    bis
                    <input id="EndTime" readonly="readonly" class="text-box single-line input-mini uneditable-input" type="time" value="@Model.EndTime.ToString("HH:mm")" name="EndTime" data-val="true">
                    Uhr
                </div>
                <div class="span6">
                    &nbsp;
                </div>
                <div class="span6">
                    <div style="margin-top: 5px; height: 23px;">
                        <div class="row">
                            <div class="span6">
                                <div id="slider-range"></div>
                            </div>
                            <div class="row">
                                <div style="padding-left: 30px;" class="span1"><i id="addOneStart" class="icon-plus"></i><i id="subOneStart" class="icon-minus"></i></div>
                                <div class="span4"></div>
                                <div class="span1 pull-right" style="margin-right: -43px;" ><i id="subOneEnde" class="icon-minus "></i><i id="addOneEnde" class="icon-plus"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span6">
                    &nbsp;
                </div>
                <div class="span6">
                    @Html.LabelFor(model => model.Description)
                    @Html.TextBoxFor(model => model.Description, new { @class = "input-block-level" })
                </div>
                <div class="span6">
                    @Html.LabelFor(model => model.Notice)
                    @Html.TextAreaFor(model => model.Notice, new { @class = "input-block-level" })
                </div>
                <div class="span6">
                    &nbsp;
                </div>
                <div class="span6">
                    @Html.LabelFor(model => model.OvertimeInMinutes)
                    @Html.TextBoxFor(model => model.OvertimeInMinutes, new { @class = "input-small" })
                    @Html.CheckBoxFor(model => model.IsManualOvertime)
                </div>
            </div>
        </div>
        <div class="well well-small">
            <input type="submit" class="btn btn-primary" name="SubmitType" value="@WorktimeHelper.BtnCreateWorktimeEntry" />
        </div>
    </div>
    <div class="span5">
        <div class="well well-small">
            Zusätzliche Funktionen<br />
            <p>
            </p>
            <p>
            </p>
            <p>
                <input type="submit" class="btn btn-primary" name="SubmitType" value="@WorktimeHelper.BtnCreateDefaultEntryWithPause" />
            </p>
            <p>
                <input type="submit" class="btn btn-primary" name="SubmitType" value="@WorktimeHelper.BtnCreateDefaultWorktime" />
            </p>
            <p>
                <input type="submit" class="btn btn-primary" name="SubmitType" value="@WorktimeHelper.BtnCreateDefaultBreaktime" />
            </p>
            <p>
                <input type="submit" class="btn btn-primary" name="SubmitType" value="@WorktimeHelper.BtnResetData" />
            </p>
            <p>
                @Html.ActionLink(WorktimeViews.BtnGetLastFreeDay, EActionWorktime.LoadLastFreeDay.ToString(), EControllers.Worktime.ToString(), new { id = 0, userId = Model.UserId }, new { @class = "btn btn-primary" })
            </p>
        </div>
        <div class="well well-small">
            Zusätzliche Informationen<br />
            Arbeitszeit @Html.Worktimes().MinToHours(Model.StatisticWorktimeData.WorktimeInMinutes)/@Html.Worktimes().MinToHours(Model.StatisticWorktimeData.DailyWorktimeInMinutes)<br />
            Aktueller Monat @Html.Worktimes().MinToHours(Model.StatisticWorktimeData.CurrentMonthlyWorktimeInMinutes)/@Html.Worktimes().MinToHours(Model.StatisticWorktimeData.MonthlyWorktimeInMinutes)<br />
            Überstunden gesamt @Html.Worktimes().MinToHours((int)Model.StatisticWorktimeData.OverAllOvertime)<br />
            Überstunden Monat @Html.Worktimes().MinToHours(Model.StatisticWorktimeData.CurrentMonthOverTime)<br />
            Urlaubstage @Html.Worktimes().MinToDays(Model.StatisticWorktimeData.CurrentYearlyHollidayTimesInMinutes, Model.StatisticWorktimeData.DailyWorktimeInMinutes)/@Html.Worktimes().MinToDays(Model.StatisticWorktimeData.YearHolidayTimesInMinutes, Model.StatisticWorktimeData.DailyWorktimeInMinutes)<br />
            Krankheitstage Jahr @Html.Worktimes().MinToDays(Model.StatisticWorktimeData.CurrentYearlyIllnesstimeInMinutes, Model.StatisticWorktimeData.DailyWorktimeInMinutes)<br />
            Krankheitstage Monat @Html.Worktimes().MinToDays(Model.StatisticWorktimeData.CurrentMonthlyIllnesstimeInMinutes, Model.StatisticWorktimeData.DailyWorktimeInMinutes)<br />
            Tage ohne Eintrag @Model.StatisticWorktimeData.CurrentNoWorktimeEntryFoundDays<br />
            <br />
            @Html.Worktimes().MinToHours("Überstunden", Model.StatisticWorktimeData.CurrentDayOverTime)
            @Html.Worktimes().MinToHours(WorktimeHelper.GetWorktimeTypeString(EWorktimeType.Worktime), Model.StatisticWorktimeData.WorktimeInMinutes)
            @Html.Worktimes().MinToHours(WorktimeHelper.GetWorktimeTypeString(EWorktimeType.Breaktime), Model.StatisticWorktimeData.BreaktimeInMinutes)
            @Html.Worktimes().MinToHours(WorktimeHelper.GetWorktimeTypeString(EWorktimeType.Projecttime), Model.StatisticWorktimeData.ProjectTimeInMinutes)
            @Html.Worktimes().MinToHours(WorktimeHelper.GetWorktimeTypeString(EWorktimeType.Illness), Model.StatisticWorktimeData.IllnesTimeInMinutes)
            @Html.Worktimes().MinToHours(WorktimeHelper.GetWorktimeTypeString(EWorktimeType.Qualification), Model.StatisticWorktimeData.QualificationTimeInMinutes)
            @Html.Worktimes().MinToHours(WorktimeHelper.GetWorktimeTypeString(EWorktimeType.Holiday), Model.StatisticWorktimeData.HolidayTimeInMinutes)
        </div>
    </div>

    
    @Html.Partial("_WorktimeList", Model)
    
    
}

@section scripts
{
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/customJs")

    <script>
        //Registrieren des PopOvers von BootStrap zum Anzeigen von Hilfetexten
        $(".helpPopOver").popover();

    </script>

    <script>
        //ZEITDIAGRAMM Funktionen, zum Erstellen der Zeitleiste
        $(function() {
            var diagram = new TimeDiagram();
            //Das Diagramm zeichnen
            diagram.drawDiagram('timeCanvas');

            //Anlegen der Passenden Einträge 
            var entries = [
                @foreach (ListEntry entryModel in Model.WorktimeListDiagramm)
                {
                     @: new TimeEntry(@entryModel.StartTimeInMinutes, @entryModel.EndTimeInMinutes, diagram.diagramTypes.@entryModel.WorktimeType.ToString()),
                  } ];
            //Die Zeiteinträge zeichnen.
            diagram.drawTimeEntries(entries);
            //Erstellen der Legende
            diagram.drawLegend(entries);
        });
    </script>

    <script>
        //TIMESLIDER Funktionen
        $(function () {
            var stepSize = 5, //anzahl der Minuten die gesetzt werden sollen
                interVall,
                intervallSpeed = 150,
                slider = $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 1440,
                    step: stepSize,
                    values: [@Model.StartTimeInMinutes.ToString(), @Model.EndTimeInMinutes.ToString()],
                    slide: function (event, ui) {
                        //Die Start und Endezeit des Sliders ermitteln die gerade ausgeählt sind.
                        var start = moment("HH:mm", "00:00").minutes(ui.values[0]),
                            ende = moment("HH:mm", "00:00").minutes(ui.values[1]);
                        $("#StartTime").val(start.format("HH:mm"));
                        $("#EndTime").val(ende.format("HH:mm"));
                    }
                });

            //Eventhandler erstellen für die + und - Bilder zum setzten der passenden Zeiten
            $("#addOneStart").on("click", function () {
                setSliderStart(0, '#StartTime', stepSize);
            });

            //Damit man die Maustaste gedrückt lassen kann auch direkt auf Mousedown lassen
            $("#addOneStart").on("mousedown", function () {
                interVall = setInterval(function () {
                    setSliderStart(0, '#StartTime', stepSize);
                }, intervallSpeed);
            });

            $("#subOneStart").on("click", function () {
                setSliderStart(0, '#StartTime', -1 * stepSize);
            });

            $("#subOneStart").on("mousedown", function () {
                interVall = setInterval(function () {
                    setSliderStart(0, '#StartTime', -1 * stepSize);
                }, intervallSpeed);
            });

            $("#addOneEnde").on("click", function () {
                setSliderEnde(1, '#EndTime', stepSize);
            });

            $("#addOneEnde").on("mousedown", function () {
                interVall = setInterval(function () {
                    setSliderEnde(1, '#EndTime', stepSize);
                }, intervallSpeed);
            });

            $("#subOneEnde").on("click", function () {
                setSliderEnde(1, '#EndTime', -1 * stepSize);
            });

            $("#subOneEnde").on("mousedown", function () {
                interVall = setInterval(function () {
                    setSliderEnde(1, '#EndTime', -1 * stepSize);
                }, intervallSpeed);
            });

            //Egal wo man sich befindet bei einem MouseUp muss das Setintervall wieder zurückgesetzt werden.
            $("html").on("mouseup", function () {
                clearInterval(interVall);
            });

            //Den Startzeitslider setzten
            function setSliderStart(index, timeId, diff) {
                //Auslesen der aktuellen Oberflächenwerte
                var startTime = $("#StartTime").val(),
                    endTime = $("#EndTime").val(),
                    ende = moment(endTime, "HH:mm"),
                    start = moment(startTime, "HH:mm"),
                    //die passenden Start und Endeminuten berechnen die aktuell angezeigt werden.
                    startMinutes = start.hours() * 60 + start.minutes(),
                    endMinutes = ende.hours() * 60 + ende.minutes();
                //Prüfen das die Slider sich nicht "vertauschen" Min und Max Value prüfen
                if ((startMinutes + diff) <= endMinutes && (startMinutes + diff) >= 0) {
                    //http://stackoverflow.com/questions/2833396/jquery-ui-slider-setting-programatically
                    //der Index gibt an welcher Slider gesetzt werden soll der für Min oder Max
                    slider.slider("values", index, startMinutes + diff);
                    //Prüfen ob die Minuten addiert oder Subtrahiert werden sollen
                    if (diff < 0) {
                        $(timeId).val(start.subtract("m", stepSize).format("HH:mm"));
                    } else {
                        $(timeId).val(start.add("m", stepSize).format("HH:mm"));
                    }
                }
            }

            //Den Endezeitslider setzten
            function setSliderEnde(index, timeId, diff) {
                var startTime = $("#StartTime").val(),
                    endTime = $("#EndTime").val(),
                    ende = moment(endTime, "HH:mm"),
                    start = moment(startTime, "HH:mm"),
                    startMinutes = start.hours() * 60 + start.minutes(),
                    endMinutes = ende.hours() * 60 + ende.minutes();
                if (startMinutes <= (endMinutes + diff) && (endMinutes + diff) < 1440) {
                    slider.slider("values", index, endMinutes + diff);
                    if (diff < 0) {
                        $(timeId).val(ende.subtract("m", stepSize).format("HH:mm"));
                    } else {
                        $(timeId).val(ende.add("m", stepSize).format("HH:mm"));
                    }
                }
            }


            //Beim Start des Programm die passende Start und Endezeit in die Textboxen eintragen.
            var start = moment("HH:mm", "00:00").minutes($("#slider-range").slider("values", 0)),
                ende = moment("HH:mm", "00:00").minutes($("#slider-range").slider("values", 1));
            $("#StartTime").val(start.format("HH:mm"));
            $("#EndTime").val(ende.format("HH:mm"));
        });
    </script>

}
